<template>
  <div class="top">
    <span style="color:#096dd9">作业管理 </span> / <span> 发布作业</span>
  </div>
  <div class="form">
    <tiny-form label-width="100px"  :model="form" ref="ruleFormRef"  :validate-type="validType">
      <tiny-form-item prop="title" required label="题目">
        <tiny-input v-model="form.title" placeholder="题目"></tiny-input>
      </tiny-form-item>
      <tiny-form-item prop="difficulty" required label="难度">
        <tiny-radio v-model="form.difficulty" label="简单">简单</tiny-radio>
    <tiny-radio v-model="form.difficulty" label="中等">中等</tiny-radio>
           <tiny-radio v-model="form.difficulty" label="困难">困难</tiny-radio>
      </tiny-form-item>
       <tiny-form-item prop="label" required label="考点">
        <div class="demo-tag-create">
      <span v-for="(tag, index) in dynamicTags" :key="'tiny-tag-' + tag + index">

        <tiny-tag closable @close="handleClose(index)" effect="light" type="success">
          {{ tag.length > 20 ? `${tag.slice(0, 20)}...` : tag }}
        </tiny-tag>
    </span>
    <tiny-input
      v-show="inputVisible"
      v-model="inputValue2"
      ref="saveTagInput2Ref"
      size="small"
      @keyup.enter="InputConfirm2"
      @blur="InputConfirm2"
    >
    </tiny-input>
    <tiny-button v-show="!inputVisible" class="button-new-tag" size="small" @click="showInput"> + New Tag </tiny-button>
  </div>
      </tiny-form-item>


 <tiny-form-item prop="language" required label="语言">

        <tiny-select v-model="form.language">
      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" >
      </tiny-option>
    </tiny-select>
      </tiny-form-item>

   <tiny-form-item prop="content" required label="内容">
       <tiny-input v-model="form.content" type="textarea"> </tiny-input>
      </tiny-form-item>
      <tiny-button class="btn" type="primary" @click="handleSubmit"> 提交</tiny-button>
    </tiny-form>

  </div>
</template>
<script setup>
import {ref, reactive,inject} from 'vue'
import {
  Form as TinyForm,
  FormItem as TinyFormItem,
  Radio as TinyRadio,
  Input as TinyInput,
  Button as TinyButton,
  Select as TinySelect, Option as TinyOption, Notify,
} from '@opentiny/vue'
const axios = inject("axios")
const options = ref([
  { value: 'c++', label: 'c++', },
  { value: 'python', label: 'python',},
  { value: 'javascript', label: 'javascript',}]
)
const validType = ref('text')
const ruleFormRef = ref(null)

const form = reactive({
  title: "",
  publisher: "",
  language: "",
  label: "",
  difficulty: "",
  content:""
})

function handleSubmit() {
  ruleFormRef.value.validate((valid) => {
   if(valid){
     form.publisher = JSON.parse(localStorage.getItem('user')).name
    axios.post("/work",form).then(res=>{
      if(res.data.code==1){
        Notify({
          title: '发布成功',
          type: 'success',
          position: 'top-right',
        })
      }else {
        Notify({
          title: '发布失败',
          type: 'error',
          position: 'top-right',
        })
      }
    }).catch(err=>{
      Notify({
        title: '网络异常',
        type: 'error',
        position: 'top-right',
      })
    })
   }

  })
}
import { Tag as TinyTag} from '@opentiny/vue'

const dynamicTags = ref([])
const inputVisible = ref(false)
const inputValue2 = ref('')
const saveTagInput2Ref = ref()

function handleClose(index) {
  dynamicTags.value.splice(index, 1)
}
const showInput = ()=>inputVisible.value = true


// 增加新标签确认
function InputConfirm2() {
  if (inputValue2.value) {
    dynamicTags.value.push(inputValue2.value)
    form.label = dynamicTags.value.join(",")
  }

  inputVisible.value = false
  inputValue2.value = ''
}

</script>

<style scoped lang="less">
.top {
  width: 100%;
  height: 70px;
  line-height: 70px;
  padding: 0 20px;

}
.demo-tag-create .tiny-tag {
  margin-left: 10px;
}

.demo-tag-create .tiny-button.button-new-tag {
  margin-left: 10px;
  height: 22px;
  line-height: 20px;
  padding-top: 0;
  padding-bottom: 0;
}

.demo-tag-create .tiny-input {
  width: 90px;
  height: 22px;
  line-height: 20px;
  margin-left: 10px;
  vertical-align: middle;
}

.demo-tag-create .tiny-input .tiny-input__inner {
  height: 22px;
  line-height: 20px;
}
.tiny-form-item {
  margin: 40px 0 !important;
}
.btn{
 float: right;
}
.form{
  width: 90%;
}
</style>